<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-06-20 09:09:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-05-14 11:24:32
 * @FilePath: Home.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="store.isCollapse ? '80px' : '200px'">
        <Aside></Aside>
      </el-aside>
      <el-container>
        <el-header>
          <Header></Header>
          <TabsNav></TabsNav>
        </el-header>
        <el-main ref="mainRef">
          <Main></Main>
        </el-main>
        <el-footer>
          <Footer></Footer>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import Main from '../components/Common/Main.vue'
import Header from '../components/Common/Header.vue'
import Footer from '../components/Common/Footer.vue'
import Aside from '../components/Common/Aside.vue'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { PiniaStore } from '../store'
import { useUserStore } from '../store/user'
const route = useRoute()
const router = useRouter()
const store = PiniaStore()
const useStore = useUserStore()
const mainRef = ref<any>(null)
onMounted(() => {
  // pinia 使用示例
  store.setMainHeight(mainRef.value.$el.clientHeight)
  if (useStore.userInfo.id === '' || useStore.userInfo.id === undefined || useStore.userInfo.id === null) {
    const user = JSON.parse(window.sessionStorage.getItem('user') as any)
    useStore.SET_INFO(user)
  }
})
</script>
<style lang="scss" scoped>
.common-layout {
  height: 100%;
}
</style>
<style lang="scss">
.el-container {
  height: 100%;
  background: #F7F8FA;

  .el-header {
    background-color: #fff;
    height: 108px;
    padding: 0px;
  }

  .el-aside {
    background: #0F2150;
  }

  .el-main {
    overflow-y: hidden;
    padding: 15px 15px 0 15px;
  }

  .el-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
  }
}
</style>
